// 响应式设计样式
// Responsive design styles for all devices

// 移动端适配
@media (max-width: 576px) {
  // 全局移动端优化
  body {
    font-size: 13px;
    line-height: 1.4;
  }
  
  // 容器适配
  .dashboard {
    padding: 12px !important;
    
    .welcome-card {
      padding: 20px !important;
      margin-bottom: 16px;
      
      .welcome-title {
        font-size: 24px !important;
      }
      
      .welcome-subtitle {
        font-size: 14px !important;
      }
      
      .welcome-meta {
        flex-direction: column;
        gap: 8px !important;
        align-items: flex-start;
      }
    }
    
    .stats-section {
      margin-bottom: 16px;
      
      .stat-card {
        margin-bottom: 12px;
        padding: 16px !important;
        
        .stat-number {
          font-size: 24px !important;
        }
        
        .stat-label {
          font-size: 12px !important;
        }
      }
    }
    
    .content-card {
      margin-bottom: 16px !important;
      
      .card-header {
        padding: 16px 20px !important;
        
        .card-title {
          font-size: 16px !important;
        }
      }
      
      .quick-actions,
      .system-info,
      .recent-activities {
        padding: 16px !important;
      }
      
      .action-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
        
        .action-icon {
          width: 40px !important;
          height: 40px !important;
          margin-right: 12px !important;
          
          i {
            font-size: 18px !important;
          }
        }
        
        .action-title {
          font-size: 14px !important;
        }
        
        .action-desc {
          font-size: 12px !important;
        }
      }
    }
  }
  
  // 登录页面移动端适配
  .login,
  .register {
    padding: 16px;
    
    .login-container,
    .register-container {
      margin: 0 !important;
      max-width: 100% !important;
    }
    
    .login-form-wrapper,
    .register-form-wrapper {
      padding: 24px 20px !important;
      
      .form-header {
        margin-bottom: 24px !important;
        
        .title {
          font-size: 24px !important;
        }
        
        .subtitle {
          font-size: 13px !important;
        }
      }
      
      .form-item {
        margin-bottom: 20px !important;
        
        .form-label {
          font-size: 13px !important;
          margin-bottom: 6px !important;
        }
      }
      
      .modern-input {
        :deep(.el-input__inner) {
          height: 44px !important;
          font-size: 14px !important;
        }
      }
    }
  }
  
  // 侧边栏移动端优化
  .sidebar-container {
    width: 100% !important;
    transform: translateX(-100%);
    
    &.mobile-show {
      transform: translateX(0);
    }
    
    .el-menu {
      padding: 4px !important;
    }
    
    .el-menu-item,
    .el-sub-menu__title {
      padding: 0 16px !important;
      height: 48px !important;
      line-height: 48px !important;
      font-size: 14px !important;
    }
  }
  
  // 导航栏移动端优化
  .navbar {
    height: 50px !important;
    
    .right-menu {
      .avatar-container {
        .avatar-wrapper {
          .user-nickname {
            display: none !important;
          }
          
          .user-avatar {
            width: 32px !important;
            height: 32px !important;
          }
        }
      }
      
      .right-menu-item {
        padding: 0 8px !important;
        height: 36px !important;
        font-size: 14px !important;
      }
    }
  }
  
  // 表格移动端适配
  .el-table {
    .el-table__header-wrapper {
      display: none;
    }
    
    .el-table__body-wrapper {
      .el-table__row {
        display: block;
        border: 1px solid #f1f5f9;
        border-radius: 8px;
        margin-bottom: 12px;
        padding: 16px;
        
        .el-table__cell {
          display: block;
          border: none !important;
          padding: 4px 0 !important;
          
          &:before {
            content: attr(data-label) ': ';
            font-weight: 600;
            color: #475569;
          }
        }
      }
    }
  }
  
  // 对话框移动端适配
  .el-dialog {
    width: 95% !important;
    margin: 20px auto !important;
    
    .el-dialog__header {
      padding: 16px 20px !important;
      
      .el-dialog__title {
        font-size: 16px !important;
      }
    }
    
    .el-dialog__body {
      padding: 20px !important;
    }
    
    .el-dialog__footer {
      padding: 12px 20px !important;
    }
  }
  
  // 分页器移动端适配
  .el-pagination {
    .el-pagination__sizes,
    .el-pagination__jump {
      display: none !important;
    }
    
    .el-pager {
      .number {
        min-width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 14px !important;
      }
    }
  }
}

// 平板端适配
@media (min-width: 577px) and (max-width: 768px) {
  .dashboard {
    padding: 16px !important;
    
    .welcome-card {
      padding: 28px !important;
    }
    
    .stats-section {
      .stat-card {
        padding: 20px !important;
      }
    }
  }
  
  .sidebar-container {
    width: 220px !important;
  }
  
  .main-container {
    margin-left: 220px !important;
  }
}

// 桌面端优化
@media (min-width: 993px) {
  .dashboard {
    .stats-section {
      .stat-card {
        &:hover {
          transform: translateY(-6px) !important;
        }
      }
    }
    
    .content-card {
      &:hover {
        transform: translateY(-4px) !important;
      }
    }
  }
}

// 大屏幕优化
@media (min-width: 1200px) {
  .dashboard {
    max-width: 1400px;
    margin: 0 auto;
    
    .welcome-card {
      .welcome-title {
        font-size: 36px !important;
      }
    }
    
    .stats-section {
      .stat-card {
        .stat-number {
          font-size: 36px !important;
        }
      }
    }
  }
}

// 触摸设备优化
@media (hover: none) and (pointer: coarse) {
  .hover-lift,
  .hover-scale,
  .hover-glow {
    &:hover {
      transform: none !important;
    }
  }
  
  .modern-btn {
    &:hover {
      transform: none !important;
    }
    
    &:active {
      transform: scale(0.98) !important;
    }
  }
  
  .action-item {
    &:hover {
      transform: none !important;
      background: rgba(102, 126, 234, 0.05) !important;
    }
    
    &:active {
      transform: scale(0.98) !important;
      background: rgba(102, 126, 234, 0.1) !important;
    }
  }
}

// 高分辨率屏幕优化
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .user-avatar,
  .captcha-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

// 横屏适配
@media (orientation: landscape) and (max-height: 500px) {
  .login,
  .register {
    .login-form-wrapper,
    .register-form-wrapper {
      margin: 20px 0 !important;
      max-height: 90vh;
      overflow-y: auto;
    }
  }
}

// 减少动画的用户偏好
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// 暗色模式适配
html.dark {
  .dashboard {
    .welcome-card {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .stat-card {
      background: var(--el-bg-color);
      border-color: var(--el-border-color);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      
      &:hover {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
      }
    }
    
    .content-card {
      background: var(--el-bg-color);
      border-color: var(--el-border-color);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      
      .card-header {
        background: var(--el-bg-color-overlay);
        border-color: var(--el-border-color);
      }
      
      .action-item {
        &:hover {
          background: var(--el-bg-color-overlay);
          border-color: var(--el-border-color);
        }
      }
      
      .info-item,
      .activity-item {
        border-color: var(--el-border-color);
      }
    }
  }
  
  // 登录注册页面暗黑模式
  .login,
  .register {
    .login-form-wrapper,
    .register-form-wrapper {
      background: rgba(20, 20, 20, 0.9);
      border-color: var(--el-border-color);
      
      .modern-input {
        :deep(.el-input__wrapper) {
          background-color: var(--el-bg-color-overlay);
          border-color: var(--el-border-color);
        }
      }
    }
  }
}